<template>
  <el-card class="search">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">销售额</el-menu-item>
      <el-menu-item index="4">访问量</el-menu-item>
    </el-menu>
    <!-- 按钮组 -->
    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
      <el-radio-button label="top">今日</el-radio-button>
      <el-radio-button label="right">本周</el-radio-button>
      <el-radio-button label="bottom">本月</el-radio-button>
      <el-radio-button label="left">今年</el-radio-button>
    </el-radio-group>
    <!-- 时间选择器 -->
    <el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts" :size="size" />
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'Search'
};
</script>
<script lang="ts" setup>
import { ref } from 'vue';

const activeIndex = ref('1');
const activeIndex2 = ref('1');
const tabPosition = ref('left');
const size = ref<'' | 'large' | 'small'>('');

const value1 = ref('');
const value2 = ref('');

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

const shortcuts = [
  {
    text: '上一周',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: '上个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  }
];
</script>
<style lang="scss" scoped>
.search {
  margin-top: 20px;
}
</style>